import React, { useState, useEffect } from 'react';
// import useQuestionsData from '../../hooks/use-questions-data';
import styles from './index.module.scss';

const Progress = ({ step }) => {
//   const { progress } = useQuestionsData();
  // 这里的这个step不能用全局的step 因为 效果是选择答案后 就添加颜色 而等到step改了 他已经跳到下一页了。
  const [width, setWidth] = useState(0);
  useEffect(() => {
    setWidth(step * 5);
  }, [step]);
  // console.log('当前宽度', width);
  return (
    <div className={styles.wrap}>
      <div className={styles.progress} style={{ width: `${width}%` }}></div>
    </div>
  );
};

export default Progress;
